<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../download/font_4595003_zwu0aoyhz3k/iconfont.css">
  <link rel="stylesheet" href="../download/font_4595003_v3a5z0bj5vb/iconfont.css">
  <link rel="stylesheet" href="../download/font_4595003_uruq7cvtdz/iconfont.css">
  <style>
    :root {
      --themeColor: #56c6f5;
    }

    body {
      background-color: #fff;
    }

    div {
      padding-left: 10vw;
      height: 40px;
      font-size: 20px;
      display: flex;
      align-items: center;
      border-top: 2px dashed var(--themeColor);
    }

    .pageColor {
      border-bottom: 2px dashed var(--themeColor);
    }

    .newPasswd {
      border-top: 2px dashed var(--themeColor);
      border-bottom: 2px dashed var(--themeColor);
    }

    .surePasswd {
      border-bottom: 2px dashed var(--themeColor);
      margin-bottom: 10px;
    }

    .revise {
      font-size: 20px;
      width: 10vw;
      height: 25px;
      line-height: 20px;
    }

    .newPasswd input {
      margin-left: 20px;
      width: 10vw;
      height: 25px;
      outline: none;
    }

    .surePasswd input {
      width: 10vw;
      height: 25px;
      outline: none;
    }

    .error {
      border: 2px red solid;
    }

    div .red {
      color: red;

      display: inline;
    }

    i {
      display: none;
    }

    span {
      cursor: pointer;
    }

    .a {
      font-size: 30px;
      margin-left: 10vw;
      margin-right: 10px;
      color: var(--themeColor);
    }

    div span.icon-gerenzhongxin-zhihui {
      margin-right: 10px;
      font-size: 30px;
      color: var(--themeColor);
    }

    .jm input,
    .my input {
      outline: none;

    }
  </style>
</head>

<body>
  <h1>系统设置</h1>

  <div class="jm">
    <span class="iconfont icon-gerenzhongxin-zhihui"></span>
    <input type="checkbox" id="jm"><label for="jm">启动加密token</label>
  </div>

  <div class="my">
    <span class="iconfont icon-gerenzhongxin-zhihui"></span>
    <label>密钥：</label><input type="text" class="my">
  </div>

  <div class="pageColor">
    <span class="iconfont icon-gerenzhongxin-zhihui"></span>
    <label>主题颜色：</label><input type="color">
  </div>

  <span class="iconfont icon-gerenzhongxin-zhihui a"></span>
  <button class="save">保存</button>

  <h1>个人设置</h1>
  <div class="newPasswd">
    <span class="iconfont icon-gerenzhongxin-zhihui"></span>
    <label>新密码：</label><input type="password" placeholder="至少6位数" value="">
    <span class="iconfont icon-yanjing_yincang_o"></span>
    <i class="iconfont icon-cuowu">error</i>
  </div>

  <div class="surePasswd">
    <span class="iconfont icon-gerenzhongxin-zhihui"></span>
    <label>确认密码：</label><input type="password" value="">
    <span class="iconfont icon-yanjing_yincang_o"></span>
    <i class="iconfont icon-cuowu">error</i>
  </div>

  <span class="iconfont icon-gerenzhongxin-zhihui a"></span>
  <button class="revise">确定修改</button>
</body>
<script>
  // 查看密码
  // 密码
  document.querySelector('.newPasswd .icon-yanjing_yincang_o').addEventListener('click', function () {
    let inputType = document.querySelector('.newPasswd input')
    inputType.type === 'password' ? (inputType.type = 'text', this.classList.toggle('icon-yanjing_yincang_o'), this.classList.add('icon-yanjing_xianshi_o')) : (inputType.type = 'password', this.classList.toggle('icon-yanjing_xianshi_o'), this.classList.add('icon-yanjing_yincang_o'))
  })
  // 确认密码
  document.querySelector('.surePasswd .icon-yanjing_yincang_o').addEventListener('click', function () {
    let inputType = document.querySelector('.surePasswd input')
    inputType.type === 'password' ? (inputType.type = 'text', this.classList.toggle('icon-yanjing_yincang_o'), this.classList.add('icon-yanjing_xianshi_o')) : (inputType.type = 'password', this.classList.toggle('icon-yanjing_xianshi_o'), this.classList.add('icon-yanjing_yincang_o'))
  })
  // 添加警告函数
  function addWarn(inp, error) {
    const span = inp.nextElementSibling
    const i = span.nextElementSibling
    i.textContent = error
    i.classList.add('red')
    inp.classList.add('error')
  }
  // 移除警告函数
  function removeWarn(inp) {
    const span = inp.nextElementSibling
    const i = span.nextElementSibling
    i.classList.remove('red')
    inp.classList.remove('error')
    i.innerHTML = ''
  }
  // 确认密码函数
  let passwdAgK = 0
  document.querySelector('.surePasswd input').addEventListener('blur', function () {
    let passwd = document.querySelector('.newPasswd input')
    if (!(this.value === passwd.value)) {
      addWarn(this, '密码不相同')
      passwdAgK = 0
    } else {
      removeWarn(this)
      passwdAgK = 1
    }
  })
  // 密码验证函数
  let passwdReg = /.{6,}/
  function passwdYz(passwdValue) {
    return passwdReg.test(passwdValue)
  }
  // 失去焦点
  let inpValue
  document.querySelector('.newPasswd input').addEventListener('blur', function (e) {
    inpValue = e.target.value
    if (!passwdYz(this.value)) {
      addWarn(this, '密码格式错误')
    } else {
      removeWarn(this)
    }
  })
  // 修改密码按钮
  document.querySelector('.revise').addEventListener('click', function () {
    let stuArr = JSON.parse(localStorage.getItem('user'))
    let loginArr = JSON.parse(localStorage.getItem('login'))
    if (passwdAgK === 1) {
      if (loginArr[0].userType === '管理员') {
        for (m of stuArr) {
          console.log(inpValue, m.password)
          if (m.username === loginArr[0].username)
            m.password = inpValue
        }
        localStorage.setItem('user', JSON.stringify(stuArr))
        alert('修改成功')
        window.location.reload()
      }
    }
  })


</script>
<script src="../js/config.js"></script>
<script src="../js/pdUserMes.js"></script>

</html>